
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>起步 · Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
<meta name="keywords" content="Bootstrap,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
    <meta name="author" content="Bootstrap中文网">

    <!-- Le styles -->
    <link href="<?echo __ROOTPATH__?>public/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?echo __ROOTPATH__?>public/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="<?echo __ROOTPATH__?>public/css/docs.css" rel="stylesheet">
<style>
body{font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
</style>
    <link href="<?echo __ROOTPATH__?>public/js/google-code-prettify/prettify.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src=<?echo __ROOTPATH__?>"public/html5shiv/3.7.0/html5shiv.min.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?echo __ROOTPATH__?>public/img/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?echo __ROOTPATH__?>public/img/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?echo __ROOTPATH__?>public/img/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<?echo __ROOTPATH__?>public/img/ico/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="<?echo __ROOTPATH__?>public/img/ico/favicon.png">

  </head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">首页</a>
              </li>
              <li class="active">
                <a href="./getting-started.html">起步</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">脚手架</a>
              </li>
              <li class="">
                <a href="./base-css.html">基本CSS样式</a>
              </li>
              <li class="">
                <a href="./components.html">组件</a>
              </li>
              <li class="">
                <a href="./javascript.html">JavaScript插件</a>
              </li>
              <li class="">
                <a href="./customize.html">定制</a>
              </li>
              <li>
                <a href="http://expo.bootcss.com" target="_blank">网站实例</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>起步</h1>
    <p class="lead">简介整个项目、组件、和如何使用一个简单的模版入门</p>
  </div>
</header>


  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#download-bootstrap"><i class="icon-chevron-right"></i> 下载</a></li>
          <li><a href="#file-structure"><i class="icon-chevron-right"></i> 文件结构</a></li>
          <li><a href="#contents"><i class="icon-chevron-right"></i> 包含了哪些东西</a></li>
          <li><a href="#html-template"><i class="icon-chevron-right"></i> HTML模版</a></li>
          <li><a href="#examples"><i class="icon-chevron-right"></i> 案例</a></li>
          <li><a href="#what-next"><i class="icon-chevron-right"></i> 下一步？</a></li>
        </ul>
      </div>
      <div class="span9">



        <!-- Download
        ================================================== -->
        <section id="download-bootstrap">
          <div class="page-header">
            <h1>1. 下载</h1>
          </div>
          <p class="lead">下载之前先检查一下是否准备好了一个代码编辑器(我们推荐使用 <a href="http://sublimetext.com/2">Sublime Text 2</a>) ，你是否已经掌握了足够的HTML和CSS知识以开展工作。这里我们不详述源码文件，但是它们可以随时被下载。在这里我们只着重介绍使用已经编译好的Bootstrap文件进行入门讲解。</p>

          <div class="row-fluid">
            <div class="span6">
              <h2>下载编译好的文件</h2>
              <p><strong>快速开始:</strong>立即下载编译好的版本吧，里面已经包含了CSS、JS和图片文件了，而且所有文件已经经过了压缩处理。不过，文档和源码文件不包含哦。</p>
              <p><a class="btn btn-large btn-primary" href="http://getbootstrap.com/2.3.2/assets/bootstrap.zip" >下载Bootstrap</a></p>
            </div>
            <div class="span6">
              <h2>下载源码</h2>
              <p>从GitHub直接下载到的最新版的源码包括CSS、JavaScript的源文件，以及一份文档。</p>
              <p><a class="btn btn-large" href="https://github.com/twbs/bootstrap/archive/v2.3.2.zip" >下载Bootstrap源码</a></p>
            </div>
          </div>
        </section>



        <!-- File structure
        ================================================== -->
        <section id="file-structure">
          <div class="page-header">
            <h1>2. 文件结构</h1>
          </div>
          <p class="lead">在下载的压缩包中你可以看到如下的文件结构和内容。所有文件按逻辑进行分类存储，并且提供了编译和压缩两个版本的文件。</p>
          <p>将下载的文件解压缩之后就可以看到如下的文件结构：</p>
<pre class="prettyprint">
  bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png
</pre>
          <p>这就是Bootstrap的基本结构：编译后的文件可以快速应用于任何web项目。我们提供了编译版的CSS和JS文件 (<code>bootstrap.*</code>)，也同时提供了编译并压缩之后的CSS和JS文件 (<code>bootstrap.min.*</code>)。图片文件是使用 <a href="http://imageoptim.com/">ImageOptim</a> 工具进行压缩的，这个工具是Mac平台上用于压缩PNG文件的一个app。</p>
          <p>请注意，所有的JavaScript插件都依赖jQuery库。</p>
        </section>



        <!-- Contents
        ================================================== -->
        <section id="contents">
          <div class="page-header">
            <h1>3. 包含了哪些东西</h1>
          </div>
          <p class="lead">Bootstrap中的HTML、CSS和JS适用于各类设备, 不过它们可以被概括成几个类别，请看本<a href="http://www.bootcss.com">文档</a>顶部的导航条。</p>

          <h2>文档章节</h2>
          <h4><a href="./scaffolding.html">脚手架</a></h4>
          <p>全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。</p>
          <h4><a href="./base-css.html">基本CSS样式</a></h4>
          <p>常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 <a href="http://glyphicons.com">Glyphicons</a>, 一个非常棒的图标集。</p>
          <h4><a href="./components.html">组件</a></h4>
          <p>常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。</p>
          <h4><a href="./javascript.html">JavaScript插件</a></h4>
          <p>和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。</p>

          <h2>组件列表</h2>
          <p><strong>组件库</strong> 和 <strong>JavaScript插件集</strong> 一同提供了以下组件元素。</p>
          <ul>
            <li>按钮组</li>
            <li>按钮下拉菜单</li>
            <li>用于导航的标签、pill、列表</li>
            <li>导航条</li>
            <li>Labels</li>
            <li>Badges</li>
            <li>Page headers and hero unit</li>
            <li>缩略图</li>
            <li>警告对话框</li>
            <li>进度条</li>
            <li>模态对话框(Modals)</li>
            <li>下拉菜单(Dropdowns)</li>
            <li>Tooltips</li>
            <li>Popovers</li>
            <li>Accordion</li>
            <li>Carousel</li>
            <li>Typeahead</li>
          </ul>
          <p>在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前, 先来看看如何使用并定制它们。</p>
        </section>



        <!-- HTML template
        ================================================== -->
        <section id="html-template">
          <div class="page-header">
            <h1>4. 基本的HTML模版</h1>
          </div>
          <p class="lead">为了把注意力完全放到使用Bootstrap上，我们先做一点儿课前准备。为了做到这一点，我们将利用一个基本的HTML模板, 其中包括我们在<a href="./getting-started.html#file-structure">文件结构</a>一章中提到的所有内容。</p>
          <p>现在, 这里展示一个<strong>典型的HTML文件</strong>：</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;
    &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
          <p>为了使其成为<strong>一个Bootstrap模板</strong>, 需要包含相应的 CSS and JS 文件：</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;!-- Bootstrap --&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, world!&lt;/h1&gt;
    &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
          <p><strong>设置成功!</strong> 加入这两个文件, 你就可以开始用Bootstrap开发任何网站和应用程序了。</p>
        </section>



        <!-- Examples
        ================================================== -->
        <section id="examples">
          <div class="page-header">
            <h1>5. 案例</h1>
          </div>
          <p class="lead">希望下面的几个案例能引导大家在基础模版的基础上做发散性思维。我们鼓励大家参考下面的案例举一反三，而不要仅仅是机械式的照抄。</p>
          <ul class="thumbnails bootstrap-examples">
            <li class="span3">
              <a class="thumbnail" href="examples/starter-template.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-starter.png" alt="">
              </a>
              <h4>最简模版</h4>
              <p>一个包含了Bootstrap的所有CSS和JavaScript文件的最简HTML文档。</p>
            </li>
            <li class="span3">
              <a class="thumbnail" href="examples/hero.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-marketing.png" alt="">
              </a>
              <h4>基本的营销类网站</h4>
              <p>具有一个主消息板块和三个辅助性元素。</p>
            </li>
            <li class="span3">
              <a class="thumbnail" href="examples/fluid.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-fluid.png" alt="">
              </a>
              <h4>流式布局</h4>
              <p>使用新的响应式布局, 流式栅格系统建立的一个流式布局。</p>
            </li>

            <li class="span3">
              <a class="thumbnail" href="examples/marketing-narrow.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-marketing-narrow.png" alt="">
              </a>
              <h4>精简版的营销类网站</h4>
              <p>适用于小项目或团队的简单、轻量级的营销类模板。</p>
            </li>
            <li class="span3">
              <a class="thumbnail" href="examples/justified-nav.html"  target="_blank">
                <img src="assets/img/examples/bootstrap-example-justified-nav.png" alt="">
              </a>
              <h4>两端对齐的导航条</h4>
              <p>带有等宽的导航链接的市场营销类页面，导航条在原始样式的基础上进行了修改。</p>
            </li>
            <li class="span3">
              <a class="thumbnail" href="examples/signin.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-signin.png" alt="">
              </a>
              <h4>登录框</h4>
              <p>基本的登录表单，使用到了自定义的较大的表单组件和灵活的布局。</p>
            </li>

            <li class="span3">
              <a class="thumbnail" href="examples/sticky-footer.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
              </a>
              <h4>页脚固定在底部</h4>
              <p>将固定高度的页脚钉在页面可视区域的最下方。</p>
            </li>
            <li class="span3">
              <a class="thumbnail" href="examples/carousel.html" target="_blank">
                <img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
              </a>
              <h4>大屏轮播</h4>
              <p>一个更具交互、突出轮播的基本营销类网站。</p>
            </li>
          </ul>
        </section>




        <!-- Next
        ================================================== -->
        <section id="what-next">
          <div class="page-header">
            <h1>下一步？</h1>
          </div>
          <p class="lead">根据文档顶部的分类查看更多案例、代码片段, 或定制Bootstrap，为你即将开展的项目做一次彻底改变。</p>
          <a class="btn btn-large btn-primary" href="./scaffolding.html" >查看 Bootstrap 文档</a>
          <a class="btn btn-large" href="./customize.html" style="margin-left: 5px;" >定制 Bootstrap</a>
        </section>




      </div>
    </div>

  </div>



    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="footer-links">
          <li><a href="http://blog.getbootstrap.com">Blog</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
        </ul>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    <script src="<?echo __ROOTPATH__?>public/jquery/1.11.1/jquery.min.js"></script>
    <script src="<?echo __ROOTPATH__?>public/bootstrap/2.3.2/js/bootstrap.min.js"></script>

    <script src="<?echo __ROOTPATH__?>public/holder/2.0/holder.min.js"></script>
    <script src="<?echo __ROOTPATH__?>public/js/google-code-prettify/prettify.js"></script>

    <script src="<?echo __ROOTPATH__?>public/js/application.js"></script>



  </body>
</html>
